<template>
    <div class="container">
        <div class="left-nav">
            <div class="nav-item" :class="{
                active: item.value === navActive,
            }" v-for="item in navList" :key="item.value">
                <img class="icon" :src="item.value === navActive ? item.activeIcon : item.icon
                    " />
                {{ item.label }}
            </div>
        </div>
        <div class="right-content">
            <div class="top">
                <div class="search-box">
                    <input v-model="keyword" placeholder="搜索关键词" />
                    <div class="btn" @click="onSearch">
                        <img :src="`${_oss_}images/admin/material-store/icon-search.png`" />
                        搜索
                    </div>
                </div>
            </div>

            <div class="table-box" style="height: calc(100% - 80px - 60px)">
                <el-table :data="renderList" height="100%" style="width: 100%">
                    <el-table-column width="100" align="center">
                        <template #header>
                            <img :src="`${_oss_}images/admin/trading-center/${allChecked.length != 0 &&
                                allChecked.length === list.length
                                ? 'icon-checked'
                                : 'icon-nochecked'
                                }.png`" @click="onSelect(-1)" />
                        </template>
                        <template #default="scope">
                            <img :src="`${_oss_}images/admin/trading-center/${allChecked.includes(scope.row.id)
                                ? 'icon-checked'
                                : 'icon-nochecked'
                                }.png`" @click="onSelect(scope.row.id)" />
                        </template>
                    </el-table-column>
                    <el-table-column align="center">
                        <template #default="scope">
                            <img class="cover_image" :src="scope.row.thumb_file" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="素材名称" align="center" />
                    <el-table-column prop="price" label="价格/积分" align="center">
                        <template #default="scope">{{ scope.row.price }}元 / {{ scope.row.integral }}积分</template>
                    </el-table-column>
                    <!-- <el-table-column
                        prop="address"
                        label="优惠抵扣"
                        align="center"
                    /> -->
                    <el-table-column label="操作" align="center">
                        <template #default="scope">
                            <div class="btn-group">
                                <img class="icon-eye" :src="`${_oss_}images/admin/trading-center/icon-eye.png`"
                                    @click="onPreview(scope.row.store_id)" />
                                <img class="icon-del" :src="`${_oss_}images/admin/trading-center/icon-del.png`"
                                    @click="onDel(scope.row.id)" />
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <div class="footer">
                <div class="price">￥{{ totalPrice }}</div>

                <div class="btn-buy" @click="onBuy">立即购买</div>
            </div>
        </div>
    </div>

    <DialogMaterialStorePayServiceP ref="payServiceRef" @success="GetList" />
</template>
<script setup>
import { useContent } from ".";

const {
    payServiceRef,
    list,
    renderList,
    navActive,
    allChecked,
    navList,
    totalPrice,
    keyword,
    onSearch,
    GetList,
    onSelect,
    onPreview,
    onDel,
    onBuy,
} = useContent();

await GetList();
</script>
<style lang="scss" scoped>
.container {
    width: 100%;
    display: flex;

    .left-nav {
        width: 170px;
        flex-shrink: 0;
        min-height: 100%;
        border-right: 1px solid #f1f1f1;
        padding-top: 23px;

        .nav-item {
            display: flex;
            align-items: center;
            margin-bottom: 25px;
            font-size: 16px;
            padding-left: 45px;
            cursor: pointer;

            .icon {
                width: 16px;
                height: 16px;
                margin-right: 8px;
            }

            &.active {
                color: #5085fb;
            }
        }
    }

    .right-content {
        width: 100%;
        padding: 0 30px;

        .top {
            width: 100%;
            height: 56px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #f1f1f1;

            .search-box {
                display: flex;
                width: 175px;
                height: 30px;
                margin-left: auto;

                input {
                    width: 111px;
                    height: 100%;
                    border: none;
                    outline: none;
                    padding: 0 8px;
                    border: 1px solid rgba(191, 191, 191, 0.5);
                    border-radius: 6px 0 0 6px;
                    font-size: 12px;

                    &::placeholder {
                        font-size: 12px;
                        color: #999999;
                    }
                }

                .btn {
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    width: 64px;
                    height: 30px;
                    background: #5085fb;
                    font-size: 14px;
                    color: #fff;
                    border-radius: 0 6px 6px 0;
                    cursor: pointer;

                    img {
                        width: 14px;
                        height: 14px;
                        margin-right: 3px;
                    }
                }
            }
        }

        .table-box {
            width: 100%;
            margin-top: 15px;

            :deep() {
                thead {
                    height: 40px;

                    tr {
                        border-radius: 20px;
                    }

                    th {
                        border-bottom: none !important;
                    }

                    .el-table__cell {
                        background-color: #f7f9fa !important;
                        color: #999999;
                    }
                }

                tbody {
                    .el-table__cell {
                        border-bottom: none;
                    }
                }

                .el-table__inner-wrapper::before {
                    height: 0;
                }
            }

            .cover_image {
                width: 143px;
                height: 92px;
                border-radius: 12px;
            }

            .btn-group {
                display: flex;
                justify-content: center;

                .icon-del,
                .icon-eye {
                    width: 18px;
                    height: 18px;
                    display: inline-block;
                    cursor: pointer;
                }

                .icon-del {
                    margin-left: 27px;
                }
            }
        }
    }

    .footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 60px;

        .price {
            font-size: 24px;
            color: #ff4941;
            padding-left: 20px;
        }

        .btn-buy {
            display: flex;
            align-items: center;
            justify-content: center;

            width: 100px;
            height: 40px;
            background: #5085fb;
            font-size: 16px;
            color: #fff;
            border-radius: 6px;
            cursor: pointer;
        }
    }
}
</style>
